<template>
	<view class="page-index">
		<view class="content-box" :style="cnstyle">
			<!-- 控制1 前景按钮-->
			<view class="area-btns area1" @click="bindShowControlF(1)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制2-->
			<!-- <view class="area-btns area2" @click="bindShowControlF(2)">
				<view class="control-btn"></view>
			</view> -->
			<!--左—右 控制3-->
			<view class="area-btns area3" @click="bindShowControlF(3)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制4-->
			<view class="area-btns area4" @click="bindShowControlF(4)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制5-->
			<view class="area-btns area5" @click="bindShowControlF(5)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制6-->
			<view class="area-btns area6" @click="bindShowControlF(6)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制7-->
			<view class="area-btns area7" @click="bindShowControlF(7)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制8-->
			<view class="area-btns area8" @click="bindShowControlF(8)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制9-->
			<view class="area-btns area9" @click="bindShowControlF(9)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制10-->
			<view class="area-btns area10" @click="bindShowControlF(10)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制11-->
			<view class="area-btns area11" @click="bindShowControlF(11)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制12-->
			<view class="area-btns area12" @click="bindShowControlF(12)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制13-->
			<view class="area-btns area13" @click="bindShowControlF(13)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制14-->
			<view class="area-btns area14" @click="bindShowControlF(14)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制15-->
			<view class="area-btns area15" @click="bindShowControlF(15)">
				<view class="control-btn"></view>
			</view>
			<!--左—右 控制16-->
			<view class="area-btns area16" @click="bindShowControlF(16)">
				<view class="control-btn"></view>
			</view>
			<image class="ctImg_bg" src="../../static/bg_bigimg3.png"></image>
		</view>
		<!-- 控制窗口 -->
		<view class="pop-model-box" v-if="popShow1" @click="closePopFn()">
			<view class="card-box" @click.stop="">
				<!-- 情景控制 -->
				<view class="section-center-box" v-if="controlType=='scene'">
					<image class="imgsrbtn" v-if="!scenec.kai"  
					@click="bindClickSceneBtn('k1')" src="../../static/kuaiguan01@2x.png"></image>
					<image class="imgsrbtn" v-else 
					@click="bindClickSceneBtn('k1')" src="../../static/kuaiguan02@2x.png"></image>
					<image class="imgsrbtn" v-if="!scenec.guan"
					 @click="bindClickSceneBtn('g1')" src="../../static/kuaiguan03@2x.png"></image>
					<image class="imgsrbtn" v-else
					@click="bindClickSceneBtn('g1')" src="../../static/kuaiguan04@2x.png"></image>
				</view>
				<!-- 筒灯开关 -->
				<view class="section-center-box" v-if="controlType=='light'">
					<image class="lightbtn" v-if="lightTypek=='g1'"
					@click="bindClickLightBtn('k1')" src="../../static/jiantongdengguan@2x.png"></image>
					<image class="lightbtn" v-if="lightTypek=='k1'"
					@click="bindClickLightBtn('g1')" src="../../static/jiantongdengkai@2x.png"></image>
				</view>
				<!-- 拍照控制 -->
				<view class="section-bottom-box" v-if="controlType=='photo'">
					<image class="photobtn" v-if="photoTypek=='g1'"
					@click="bindClickPhotoBtn('k1')" src="../../static/paizhaojz@2x.png"></image>
					<image class="photobtn" v-if="photoTypek=='k1'"
					@click="bindClickPhotoBtn('g1')" src="../../static/paizhaojax@2x.png"></image>
				</view>
				<!-- 电视tv控制 -->
				<view class="section-center-box" v-if="controlType=='tv'">
					<view class="column-content">
						<view class="row-box">
							<!-- 播放 -->
							<image class="imgbtn" v-if="!tvcontrol.play"
							@click="bindClickTvBtn('1')" src="../../static/tvjz@2x_55.png"></image>
							<image class="imgbtn" v-else
							@click="bindClickTvBtn('1')" src="../../static/tvjz02@2x.png"></image>
							<!--暂停  -->
							<image class="imgbtn" v-if="!tvcontrol.pause"
							@click="bindClickTvBtn('2')" src="../../static/tvzt01@2x.png"></image>
							<image class="imgbtn" v-else
							@click="bindClickTvBtn('2')" src="../../static/tvzt02@2x.png"></image>
							<!-- 重置 -->
							<image class="imgbtn" v-if="!tvcontrol.reset"
							@click="bindClickTvBtn('3')" src="../../static/tvreset01@2x.png"></image>
							<image class="imgbtn" v-else
							@click="bindClickTvBtn('3')" src="../../static/tvreset02@2x.png"></image>
						</view>
						<view class="row-box">
							<!-- 后退 -->
							<image class="imgbtn" v-if="!tvcontrol.back"
							@click="bindClickTvBtn('4')" src="../../static/tvht01@2x.png"></image>
							<image class="imgbtn" v-else
							@click="bindClickTvBtn('4')" src="../../static/tvht02@2x.png"></image>
							<!-- 前进 -->
							<image class="imgbtn" v-if="!tvcontrol.forward"
							@click="bindClickTvBtn('5')" src="../../static/tvqj01@2x.png"></image>
							<image class="imgbtn" v-else
							@click="bindClickTvBtn('5')" src="../../static/tvqj02@2x.png"></image>
							<!-- 音量+ -->
							<image class="imgbtn" v-if="!tvcontrol.volumeUp"
							@click="bindClickTvBtn('6')" src="../../static/tvyladd01@2x.png"></image>
							<image class="imgbtn" v-else
							@click="bindClickTvBtn('6')" src="../../static/tvyladd02@2x.png"></image>
							<!-- 音量- -->
							<image class="imgbtn" v-if="!tvcontrol.volumeDown"
							@click="bindClickTvBtn('7')" src="../../static/tvylj01@2x.png"></image>
							<image class="imgbtn" v-else
							@click="bindClickTvBtn('7')" src="../../static/tvylj02@2x.png"></image>
							
						</view>
					</view>
				</view>
				<!-- 滑轨控制 -->
				<view class="section-center-box" v-if="controlType=='slideway'">
					<view class="column-content">
						<view class="row-box title-bc">
							<!-- 左边 -->
							<image class="backsmbtn" v-if="!slideway.back"
							@click="bindClickSlidewayBtn('back')" src="../../static/img_left01@2x.png"></image>
							<image class="backsmbtn" v-else
							@click="bindClickSlidewayBtn('back')" src="../../static/img_left02@2x.png"></image>
							<!-- 返回起点 -->
							<image class="backsetbtn" v-if="!slideway.reset"
							@click="bindClickSlidewayBtn('0')" src="../../static/img_start01@2x.png"></image>
							<image class="backsetbtn" v-else
							@click="bindClickSlidewayBtn('0')" src="../../static/img_start02@2x.png"></image>
							<!-- 右边 -->
							<image class="backsmbtn" v-if="!slideway.forward"
							@click="bindClickSlidewayBtn('forward')" src="../../static/img_right01@2x.png"></image>
							<image class="backsmbtn" v-else
							@click="bindClickSlidewayBtn('forward')" src="../../static/img_right02@2x.png"></image>
						</view>
						<view class="row-box ">
							<!-- 1 -->
							<image class="imgbtn2" v-if="!slideway.c1"
							@click="bindClickSlidewayBtn('1')" src="../../static/1@2x.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('1')" src="../../static/1@2x_47.png"></image>
							<!-- 2 -->
							<image class="imgbtn2" v-if="!slideway.c2"
							@click="bindClickSlidewayBtn('2')" src="../../static/2@2x.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('2')" src="../../static/2@2x_37.png"></image>
							<!-- 3 -->
							<image class="imgbtn2" v-if="!slideway.c3"
							@click="bindClickSlidewayBtn('3')" src="../../static/3@2x.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('3')" src="../../static/3@2x_36.png"></image>
							<!-- 4 -->
							<image class="imgbtn2" v-if="!slideway.c4"
							@click="bindClickSlidewayBtn('4')" src="../../static/4@2x.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('4')" src="../../static/4@2x_85.png"></image>
							<!-- 5 -->
							<image class="imgbtn2" v-if="!slideway.c5"
							@click="bindClickSlidewayBtn('5')" src="../../static/5@2x.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('5')" src="../../static/5@2x_26.png"></image>
							<!-- 6 -->
							<image class="imgbtn2" v-if="!slideway.c6"
							@click="bindClickSlidewayBtn('6')" src="../../static/6@2x.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('6')" src="../../static/6@2x_65.png"></image>
							<!-- 7 -->
							<image class="imgbtn2" v-if="!slideway.c7"
							@click="bindClickSlidewayBtn('7')" src="../../static/7@2x.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('7')" src="../../static/7@2x_57.png"></image>
							<!-- 8 -->
							<image class="imgbtn2" v-if="!slideway.c8"
							@click="bindClickSlidewayBtn('8')" src="../../static/8@2x.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('8')" src="../../static/8@2x_25.png"></image>
							<!-- 9 -->
							<image class="imgbtn2" v-if="!slideway.c9"
							@click="bindClickSlidewayBtn('9')" src="../../static/9@2x.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('9')" src="../../static/9@2x_67.png"></image>
						</view>
						<view class="row-box rowtwob">
							<!-- 音量+ -->
							<image class="imgbtn2" v-if="!slideway.volumeUp"
							@click="bindClickSlidewayBtn('volumeUp')" src="../../static/slidewayyladd01@2x.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('volumeUp')" src="../../static/slidewayyladd02@2x.png"></image>
							<!-- 音量禁止 -->
							<image class="imgbtn2" v-if="!slideway.volumeClose"
							@click="bindClickSlidewayBtn('volumeClose')" src="../../static/24gf-volumeDisable@2x.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('volumeClose')" src="../../static/24gf-volumeDisable@2x_70.png"></image>
							<!-- 播放  -->
							<image class="imgbtn2" v-if="!slideway.play"
							@click="bindClickSlidewayBtn('play')" src="../../static/slidewaybf01@2x.png.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('play')" src="../../static/slidewaybf02@2x.png.png"></image>
							<!--暂停 -->
							<image class="imgbtn2" v-if="!slideway.pause"
							@click="bindClickSlidewayBtn('pause')" src="../../static/slidewayzt01@2x.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('pause')" src="../../static/slidewayzt02@2x.png"></image>
							<!-- 音量+满 -->
							<image class="imgbtn2" v-if="!slideway.volumeMax"
							@click="bindClickSlidewayBtn('volumeMax')" src="../../static/24gf-volumeMiddle@2x_35.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('volumeMax')" src="../../static/24gf-volumeMiddle@2x.png"></image>
							<!-- 音量- -->
							<image class="imgbtn2" v-if="!slideway.volumeDown"
							@click="bindClickSlidewayBtn('volumeDown')" src="../../static/slidewayylj01@2x.png"></image>
							<image class="imgbtn2" v-else
							@click="bindClickSlidewayBtn('volumeDown')" src="../../static/slidewayylj02@2x.png"></image>
							
						</view>
					</view>
				</view>
				<!-- 空气质量 -->
				<view class="section-center-box quality-box" v-if="controlType=='airQuality'">
					<view class="item-quality">
						<view class="value-box">
							<view class="value-c">{{monitorInfo.valueArr[0]}}</view>
							<view class="titname">{{monitorInfo.nameArr[0]}}</view>
							<!-- <image class="tit" src="../../static/温度@2x.png"></image> -->
						</view>
						
						<view class="value-box">
							
							<view class="value-c">{{monitorInfo.valueArr[1]}}</view>
							<view class="titname">{{monitorInfo.nameArr[1]}}</view>
							<!-- <image class="unit" src="../../static/CO2@2x.png"></image> -->
						</view>
					</view>
					<view class="item-quality">
						<view class="value-box">
							<view class="value-c">{{monitorInfo.valueArr[2]}}</view>
							<view class="titname">{{monitorInfo.nameArr[2]}}</view>
							<!-- <view class="value-c">400</view>
							<image class="tit" src="../../static/湿度@2x.png"></image> -->
						</view>
						<view class="value-box">
							<view class="value-c">{{monitorInfo.valueArr[3]}}</view>
							<view class="titname">{{monitorInfo.nameArr[3]}}</view>
							<!-- <view class="value-c">400</view>
							<image class="unit2" src="../../static/PM2.5@2x.png"></image> -->
						</view>
					</view>
					<view class="item-quality">
						
						<view class="value-box">
							<view class="value-c">{{monitorInfo.valueArr[4]}}</view>
							<view class="titname">{{monitorInfo.nameArr[4]}}</view>
							<!-- <view class="value-c">200</view>
							<image class="tit" src="../../static/甲醛@2x.png"></image> -->
						</view>
						<view class="value-box">
							<view class="value-c">{{monitorInfo.valueArr[5]}}</view>
							<view class="titname">{{monitorInfo.nameArr[5]}}</view>
							<!-- <view class="value-c">200</view>
							<image class="unit3" src="../../static/PM10@2x.png"></image> -->
						</view>
					</view>
				</view>
				<view class="close-btn" @click="popShow1=false"></view>
			</view>
		</view>
		
		<!-- #ifdef APP-PLUS -->
		<updater-grade title="发现新版本" :content="versionInfo.description" :item="versionInfo" @close="updateShow=false" v-if="updateShow"></updater-grade>
		<!-- #endif -->
	</view>
</template>

<script>
	import updaterGrade from '@/components/updater-grade'
	import http from '@/utils/http'
	import { checkUpdater } from '@/utils/checkUpdater'
	let timer = null;
	let timerQ = null;
	export default {
		components: {
		// #ifdef APP-PLUS
		updaterGrade 
		// #endif
		},
		data() {
			return {
				popShow1: false,
				updateShow:false,
				versionInfo:{},
				// 按钮控制
				scenec:{
					kai:false,
					guan:false
				},
				sceneTypek:'g1',//g1-关k1-开
				controlType:'',//控制类型
				lightTypek:'g1',//灯开 关
				photoTypek:'g1',//拍照
				tvTypek:'g1',
				tvcontrol:{//tv控制按钮对象
					play:false,
					pause:false,
					reset:false,
					back:false,
					forward:false,
					volumeUp:false,
					volumeDown:false
				},
				slideway:{//滑轨控制对象
					reset:false,//返回起点
					back:false,
					forward:false,
					c1:false,
					c2:false,
					c3:false,
					c4:false,
					c5:false,
					c6:false,
					c7:false,
					c8:false,
					c9:false,
					volumeUp:false,
					volumeClose:false,
					volumeMax:false,
					volumeDown:false,
					play:false,
					pause:false,
				},
				deviceList:[],
				devicePosIndex:0,//定位设备序号 
				monitorInfo:{
					nameArr:[],
					unitArr:[],
					valueArr:[]
				},
				deciceUpdate:false,//更新设备信息
				cnstyle:'',
			}
		},
		onLoad() {
			uni.getSystemInfo({
			    success: (res) =>{
			        console.log(res);
			        console.log(res.pixelRatio);
					let wt = res.windowWidth;
					let ht = res.windowHeight;
					if((wt/ht)>(2000/1200)){
						this.cnstyle = {'transform':'none'};
					}
			    }
			});
			// #ifdef H5
				this.h5detectOrient()
			// #endif
			// #ifdef APP-PLUS
			checkUpdater((data)=>{
				if(data.ready){ //验证完毕
					this.updateShow = data.ready;
					this.versionInfo = data
				}
			});
			// #endif
			for(let i=0;i<16;i++){
				this.deviceList.push({})
			}
			console.log(this.deviceList);
			
			this.queryDeviceInfo();
		},
		methods: {
			queryDeviceInfo(type){
				this.queryDeviceList(type);
				clearInterval(timer);
				timer = setInterval(()=>{
					if(!this.deciceUpdate){
						this.queryDeviceList(type);
					}else{
						clearInterval(timer);
						timer = null;
					}
				},2200)
			},
			queryDeviceList(type){
				this.deciceUpdate = false;
				http.get('phone-api/hardware/list', {}, { timeout: 600000 }).then(res => {
					uni.hideLoading()
					console.log(res)
					if (res.data.code === 200) {
						let deviceList = res.data.data;
						if(deviceList.length>0){
							this.deciceUpdate = true;
						}
						for(let i=0;i<deviceList.length;i++){
							let tcpGatewayInfo = deviceList[i].tcpGatewayInfo;
							if(tcpGatewayInfo.host=='192.168.110.91'){//d2
								this.deviceList.splice(1,1,deviceList[i]);
							}else if(tcpGatewayInfo.host=='192.168.110.92'){//d3
								this.deviceList.splice(2,1,deviceList[i]);
							}else if(tcpGatewayInfo.host=='192.168.110.99'){//d5
								this.deviceList.splice(4,1,deviceList[i]);
							}else if(tcpGatewayInfo.host=='192.168.110.98'){//d8
								this.deviceList.splice(7,1,deviceList[i]);
							}else if(tcpGatewayInfo.host=='192.168.110.93'){//d9
								this.deviceList.splice(8,1,deviceList[i]);
							}else if(tcpGatewayInfo.host=='192.168.110.97'){//d12
								this.deviceList.splice(11,1,deviceList[i]);
							}else if(tcpGatewayInfo.host=='192.168.110.94'){//d13
								this.deviceList.splice(12,1,deviceList[i]);
							}else if(tcpGatewayInfo.host=='192.168.110.96'){//d15
								this.deviceList.splice(14,1,deviceList[i]);
							}else if(tcpGatewayInfo.host=='192.168.110.95'){//d16
								this.deviceList.splice(15,1,deviceList[i]);
							}else{
								if(tcpGatewayInfo.host=='192.168.110.69'&&tcpGatewayInfo.port==6000){
									if(deviceList[i].hardwareGatewayInfo&&deviceList[i].hardwareGatewayInfo.port=='2004'&&deviceList[i].loop=='0003'){
										this.deviceList.splice(3,1,deviceList[i]);//d4
									}else if(deviceList[i].hardwareGatewayInfo&&deviceList[i].hardwareGatewayInfo.port=='2004'&&deviceList[i].loop=='0004'){
										this.deviceList.splice(6,1,deviceList[i]);//d7
									}else if(deviceList[i].hardwareGatewayInfo&&deviceList[i].hardwareGatewayInfo.port=='2004'&&deviceList[i].loop=='0005'){
										this.deviceList.splice(10,1,deviceList[i]);//d11
									}else if(deviceList[i].hardwareGatewayInfo&&deviceList[i].hardwareGatewayInfo.port=='2004'&&deviceList[i].loop=='0006'){
										this.deviceList.splice(13,1,deviceList[i]);//d14
									}else if(deviceList[i].hardwareGatewayInfo&&deviceList[i].hardwareGatewayInfo.port=='2001'&& deviceList[i].logicAddress=='01'){
										this.deviceList.splice(9,1,deviceList[i]);//d10
									}else{
										
									}
								}
								
							}
						}
						console.log(this.deviceList,'===')
						if(type&&type=='airQuality'){
							this.controlType = 'airQuality';
							let posDevice = this.deviceList[this.devicePosIndex];
							let nameArr =  posDevice.view.name;
							let unitArr =  posDevice.view.unit;
							let valueArr =  posDevice.view.value.number;
							this.monitorInfo.nameArr = nameArr;
							this.monitorInfo.unitArr = unitArr;
							this.monitorInfo.valueArr = valueArr;
						}
					} else {
						
					}
				})
			},
			closePopFn(){
				this.popShow1=false;
				if(timerQ){
					clearInterval(timerQ);
					timerQ = null;
				}
				
			},
			bindShowControlF(order){
				this.controlType = '';
				if(!this.deciceUpdate){
					return uni.showToast({ title: '暂未查找到设备信息', icon: 'none' })
				}
				this.popShow1 = true;
				this.devicePosIndex = order-1;//设备位置
				if(order==1){
					this.controlType = 'scene';
				}else if(order==2||order==3||order==9||order==12||order==13||order==15||order==16){//k 2
					this.controlType = 'tv';
				}else if(order==4||order==7||order==11||order==14){
					try {
						this.controlType = 'light';
					   let posDevice = this.deviceList[this.devicePosIndex];
					   if(posDevice&&posDevice.value.switch==1){
					   	this.lightTypek = 'k1';
					   }else{
					   	this.lightTypek = 'g1';
					   }
					   
					}
					catch(err) {
					    return uni.showToast({ title: '暂未查找到设备信息', icon: 'none' })
					}
				}else if(order==5){
					this.controlType = 'photo';
				}else if(order==8){
					try {
						
					    let posDevice = this.deviceList[this.devicePosIndex];
					    let val = posDevice.value.site;//site 1~9
					    this.slideway['c'+val] = true;
					    this.controlType = 'slideway';
						
					}
					catch(err) {
					    return uni.showToast({ title: '暂未查找到设备信息', icon: 'none' })
					}
					
				}else if(order==10){
					try {
						clearInterval(timerQ);
						this.queryA_M_QUERY();
						timerQ = setInterval(()=>{
							this.queryA_M_QUERY();
						},3000)
					   this.controlType = 'airQuality';
					   let posDevice = this.deviceList[this.devicePosIndex];
					   let nameArr =  posDevice.view.name;
					   let unitArr =  posDevice.view.unit;
					   let valueArr =  posDevice.view.value.number;
					   this.monitorInfo.nameArr = nameArr;
					   this.monitorInfo.unitArr = unitArr;
					   this.monitorInfo.valueArr = valueArr;
					}
					catch(err) {
					    return uni.showToast({ title: '暂未查找到设备信息', icon: 'none' })
					}
				}else{
					
				}
			},
			queryA_M_QUERY(){
				let id = this.deviceList[this.devicePosIndex].id;
				//查询环境控制
				http.post(`admin-api/${id}/code/A_M_QUERY/control`).then(res => {
					
					if (res.data.code === 200) {
						this.queryDeviceInfo('airQuality')
					} else {
						uni.showModal({
							title: '查询失败',
							content: res.data.message,
							showCancel: false
						})
						
					}
				})
			},
			//场景
			bindClickSceneBtn(type){
				this.sceneTypek = type;
				let id = 2;//闭馆2 开馆1
				if(type=='k1'){
					id = 1;
					this.scenec.kai = true;
					this.scenec.guan = false;
				}else{
					id = 2;
					this.scenec.guan = true;
					this.scenec.kai = false;
				}
				
				this.handleHouse(id);
				setTimeout(()=>{
					this.scenec.kai = false;
					this.scenec.guan = false;
				},500)
			},
			//电灯开关
			bindClickLightBtn(type){
				
				let code = '';
				let id = this.deviceList[this.devicePosIndex].id;
				let posDevice = this.deviceList[this.devicePosIndex];
				let instruction = posDevice.view.instruction;
				let val = 1;
				if(posDevice.value.switch==1){
					code = instruction.closeAll;
					val = 0;
				}else{
					code = instruction.openAll;
					val = 1;
				}
				let params =  { 
					value: val,
					change_value: {switch:val} ,
				 }
				uni.showLoading();
				http.post(`admin-api/${id}/code/${code}/control`,params).then(res => {
					uni.hideLoading();
					console.log(res)
					this.lightTypek = type;
					
					if (res.data.code === 200) {
						// uni.showToast({ title: res.data.message, icon: 'none' })
						if(posDevice.value.switch==1){
							posDevice.value.switch = 0;
						}else{
							posDevice.value.switch = 1;
						}
					} else {
						uni.showModal({
							title: '设失败',
							content: res.data.message,
							showCancel: false
						})
						setTimeout(()=>{
							this.lightTypek = 'g1'
						},500)
					}
				})
			},
			//拍照
			bindClickPhotoBtn(type){
				this.photoTypek = type;
				let code = '';
				let id = this.deviceList[this.devicePosIndex].id;
				let posDevice = this.deviceList[this.devicePosIndex];
				let instruction = posDevice.view.instruction;
				code = instruction.takePhoto;
				setTimeout(()=>{
					this.photoTypek = 'g1'
				},500)
				uni.showLoading();
				http.post(`admin-api/${id}/code/${code}/control`).then(res => {
					console.log(res)
					uni.hideLoading()
					if (res.data.code === 200) {
						uni.showToast({ title: res.data.message, icon: 'none' })
					} else {
						uni.showModal({
							title: '设失败',
							content: res.data.message,
							showCancel: false
						})
					}
				})
			},
			//电视
			bindClickTvBtn(type){
				let code = '';
				let id = this.deviceList[this.devicePosIndex].id;
				let posDevice = this.deviceList[this.devicePosIndex];
				let instruction = posDevice.view.instruction;
				if(type==1){//播放
					code = instruction.paly;
					this.tvcontrol.play = true;
				}else if(type==2){//暂停
					code = instruction.pause;
					this.tvcontrol.pause = true;
				}else if(type==3){//停止
					code = instruction.stop;
					this.tvcontrol.reset = true;
				}else if(type==4){//后退
					code = instruction.previous;
					this.tvcontrol.back = true;
				}else if(type==5){//前进
					code = instruction.next;
					this.tvcontrol.forward = true;
				}else if(type==6){//音量+
					code = instruction.sound_up;
					this.tvcontrol.volumeUp = true;
				}else if(type==7){//音量-
					code = instruction.sound_down;
					this.tvcontrol.volumeDown = true;
				}
				setTimeout(()=>{
					this.tvcontrol = {
						play:false,
						pause:false,
						reset:false,
						back:false,
						forward:false,
						volumeUp:false,
						volumeDown:false
					}
				},500)
				uni.showLoading();
				http.post(`admin-api/${id}/code/${code}/control`).then(res => {
					console.log(res)
					uni.hideLoading()
					if (res.data.code === 200) {
						uni.showToast({ title: res.data.message, icon: 'none' })
					} else {
						uni.showModal({
							title: '设置失败',
							content: res.data.message,
							showCancel: false
						})
					}
				})
			},
			//滑轨
			bindClickSlidewayBtn(type){
				let code = '';
				let id = this.deviceList[this.devicePosIndex].id;
				let posDevice = this.deviceList[this.devicePosIndex];
				let instruction = posDevice.view.instruction;
				if(type=='back'){//left退
					code = instruction.left;
					this.slideway.back = true;
					
				}else if(type==0){//home起点
					code = instruction.home;
					this.slideway.reset = true;
				}else if(type=='forward'){//快进
					code = instruction.right;
					this.slideway.forward = true;
				}else if(type=='volumeUp'){//加音量
					code = instruction.vol_up;
					this.slideway.volumeUp = true;
				}else if(type=='volumeClose'){//禁音
					code = instruction.vol_0;
					this.slideway.volumeClose = true;
				}else if(type=='play'){//开始
					code = instruction.start;
					this.slideway.play = true;
				}else if(type=='pause'){//暂停
					code = instruction.pause;
					this.slideway.pause = true;
				}else if(type=='volumeMax'){//取消禁音
					code = instruction.vol_1;
					this.slideway.volumeMax = true;
				}else if(type=='volumeDown'){//音量-
					code = instruction.pause;
					this.slideway.volumeDown = true;
				}else{
					let posC = parseInt(type);
					if(typeof posC=='number'&&type>0){//滑点位 1- 9
						code = instruction.change;
						
						posDevice.value.site = type;
						for(let i=1;i<=9;i++){
							if(i==type){
								this.slideway['c'+i] = true;
							}else{
								this.slideway['c'+i] = false;
							}
						}
					}
				}
				let val = posDevice.value.site;//site 1~9
				if(val==0){
					return uni.showToast({ title: '请先选择1~9位置', icon: 'none' })
				}
				 let params = {
					value: val,
					change_value:{site:val},
				  }
				  uni.showLoading();
				http.post(`admin-api/${id}/code/${code}/control`,params).then(res => {
					console.log(res)
					uni.hideLoading()
					if (res.data.code === 200) {
						uni.showToast({ title: res.data.message, icon: 'none' })
						if(type==0){//home起点
							for(let i=1;i<=9;i++){
								this.slideway['c'+i] = false;
							}
							posDevice.value.site = 0;
						}
					} else {
						uni.showModal({
							title: '设置失败',
							content: res.data.message,
							showCancel: false
						})
					}
				})
				setTimeout(()=>{
					let initD ={
						reset:false,
						back:false,
						forward:false,
						volumeUp:false,
						volumeClose:false,
						volumeMax:false,
						volumeDown:false,
						play:false,
						pause:false,
					}
					this.slideway = {...this.slideway,...initD};
				},500)
			},
			// 开馆/闭馆
			handleHouse(id) {
				uni.showLoading()
				http.post(`phone-api/hardware-fun/${id}/order`).then(res => {
					uni.hideLoading()
					if (res.data.code === 200) {
						uni.showToast({ title: res.data.message, icon: 'success' })
					} else {
						uni.showModal({
							title: '失败',
							content: res.data.message,
							showCancel: false
						})
					}
				}).catch(error => {
					uni.hideLoading()
					console.log(error)
				})
			},
			// 设置接口地址
			handleSetBaseUrl() {
				const ip = uni.getStorageSync('IP_ADDRESS')
				// #ifdef H5
				let result = window.prompt('输入服务器IP', ip)
				if (result) {
					this.setBaseUrl(result)
				}
				// #endif
				// #ifdef APP-PLUS
				plus.nativeUI.prompt("输入服务器IP", (e) => {
					var value = e.value
					if (e.index == 0 && value) {
						this.setBaseUrl(value)
					}
				}, '', ip)
				// #endif
			},
			h5detectOrient(){
				// 利用 CSS3 旋转 对根容器逆时针旋转 90 度
				var detectOrient = function() {
				  var width = document.documentElement.clientWidth,
					  height =  document.documentElement.clientHeight,
					  $wrapper =  document.getElementsByTagName("body")[0],
					  style = "";
				  if( width >= height ){ // 横屏
					  style += "width:" + width + "px;";  // 注意旋转后的宽高切换
					  style += "height:" + height + "px;";
					  style += "-webkit-transform: rotate(0); transform: rotate(0);";
					  style += "-webkit-transform-origin: 0 0;";
					  style += "transform-origin: 0 0;";
					  
				  }
				  else{ // 竖屏
					  style += "width:" + height + "px;"; 
					  style += "height:" + width + "px;"; 
					  style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
					  // 注意旋转中点的处理
					  style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
					  style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
					  if(width/height<2){
					  						  
					  }
				  }
				  $wrapper.style.cssText = style;
				}
				window.onresize = detectOrient;
				detectOrient();
			}
		}
	}
</script>

<style lang="stylus">
@import '../../stylus/mixin.styl'
.page-index {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-color: #FFFFFF;
	overflow: hidden;
}
.content-box{
	width: px2rem(2000px);
	height: px2rem(1200px);
	position absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin: auto;
	z-index 1;
	transform: scale(.8) translateY(px2rem(150px));
	transform-origin: 0 0;
	.area-btns{
		width:px2rem(170px);
		height:px2rem(170px);
		position: absolute;
		&.area1{
			position: absolute;
			left:px2rem(210px);
			top:px2rem(250px);
		}
		&.area2{
			position: absolute;
			left:px2rem(210px);
			top:px2rem(570px);
		}
		&.area3{
			position: absolute;
			left:px2rem(440px);
			top:px2rem(350px);
		}
		&.area4{
			width:px2rem(140px);
			height:px2rem(140px);
			position: absolute;
			left:px2rem(430px);
			top:px2rem(590px);
		}
		&.area5{
			width:px2rem(140px);
			height:px2rem(140px);
			position: absolute;
			left:px2rem(620px);
			bottom:px2rem(270px);
		}
		&.area6{
			width:px2rem(140px);
			height:px2rem(140px);
			position: absolute;
			left:px2rem(840px);
			top:px2rem(385px);
		}
		&.area7{
			width:px2rem(140px);
			height:px2rem(140px);
			position: absolute;
			left:px2rem(845px);
			top:px2rem(595px);
		}
		&.area8{
			width:px2rem(140px);
			height:px2rem(140px);
			position: absolute;
			left:px2rem(850px);
			bottom:px2rem(260px);
		}
		&.area9{
			width:px2rem(140px);
			height:px2rem(140px);
			position: absolute;
			left:px2rem(1090px);
			top:px2rem(275px);
		}
		&.area10{
			width:px2rem(120px);
			height:px2rem(120px);
			position: absolute;
			left:px2rem(1130px);
			top:px2rem(445px);
		}
		&.area11{
			width:px2rem(120px);
			height:px2rem(120px);
			position: absolute;
			left:px2rem(1200px);
			top:px2rem(600px);
		}
		&.area12{
			width:px2rem(130px);
			height:px2rem(130px);
			position: absolute;
			left:px2rem(1205px);
			bottom:px2rem(335px);
		}
		
		&.area13{
			width:px2rem(140px);
			height:px2rem(140px);
			position: absolute;
			right:px2rem(345px);
			top:px2rem(270px);
		}
		&.area14{
			width:px2rem(130px);
			height:px2rem(130px);
			position: absolute;
			right:px2rem(370px);
			top:px2rem(600px);
		}
		&.area15{
			width:px2rem(130px);
			height:px2rem(130px);
			position: absolute;
			right:px2rem(350px);
			bottom:px2rem(285px);
		}
		&.area16{
			width:px2rem(140px);
			height:px2rem(140px);
			position: absolute;
			right:px2rem(135px);
			bottom:px2rem(470px);
		}
	}
}
.ctImg_bg{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	pointer-events:none;
	user-select:none;
}
.section-center-box{
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	.imgsrbtn{
		margin: 0 px2rem(80px)
	}
	.lightbtn{
		width: px2rem(135px);
		height: px2rem(189px);
		
	}
	.column-content{
		display: flex;
		width:100%;
		height:100%;
		flex-direction:column;
		justify-content:center;
	}
	.row-box{
		display:flex;
		justify-content:center;
		.imgbtn{
			margin:px2rem(14px) px2rem(35px);
		}
		.imgbtn2{
			margin:px2rem(14px) px2rem(5px);
		}
		&.rowtwob{
			.imgbtn2{
				margin:px2rem(14px) px2rem(25px);
			}
		}
	}
	.title-bc{
		padding-top:px2rem(36px);
		padding-bottom:px2rem(18px);
	}
	.backsmbtn{
		margin: 0 px2rem(30px)
	}
}
.quality-box{
	padding: 0 px2rem(100px);
	box-sizing:border-box;
}
.item-quality{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	
	.tit{
		width:px2rem(62px);
		height:px2rem(31px);
	}
	.value-box{
		padding-top:px2rem(50px);
		display:flex;
		flex-direction:column;
		align-items:center;
		padding-bottom:px2rem(10px);
		.value-c{
			font-size:px2rem(38px)
			color #FFFFFF;
			padding-bottom:px2rem(32px);
		}
		.unit{
			width:px2rem(54px);
			height:px2rem(24px);
		}
		.unit2{
			width:px2rem(90px);
			height:px2rem(24px);
		}
		.unit3{
			width:px2rem(80px);
			height:px2rem(24px);
		}
		.titname{
			font-size:px2rem(36px)
			color #FFFFFF;
		}
	}
}
.section-bottom-box{
	width:100%;
	height:100%;
	display:flex;
	align-items:flex-end;
	justify-content:center;
	.photobtn{
		width:px2rem(174px);
		height:px2rem(64px);
		margin-bottom:px2rem(30px);
	}
}
</style>
